<template>
	<view class="page-mine">
		<view class="user-avatar">
			<image :src="userData?.avatar" mode="scaleToFill" class="user-avatar-img" />
			<view class="user-box" data-eventsync="true">
				<view class="user-text" data-eventsync="true">{{ userData?.nickname }}
					<image class="refresh-img" src="https://img.wlcod.com/novel/img/Switch_icon.png" data-eventsync="true"
						@tap="getUserProfile" />
				</view>
				<view class="userId">ID： {{ userData?.id }}</view>
				<view class="vip-expiration-time" v-if="userData?.viptime">VIP到期时间： {{ userData?.viptime }}</view>
			</view>
		</view>

		<view class="vip-banner">
			<view class="vip-left">
				<view class="vip-desc">尊享vip服务</view>
				<view class="vip-tips">全场漫画畅读不停</view>
			</view>
			<view class="vip-right" @click="goPage('vip')">
				{{ 1 == 1 ? '立即前往' : '立即续费' }}
				<image class="right-arrow" src="https://img.wlcod.com/novel/img/right-arrow1.webp" />
			</view>
		</view>

		<view class="history-module">
			<!-- 标题栏 -->
			<view class="history-header">
				<view class="title">历史记录</view>
				<view class="more-link" @click="goPage('history')">更多
					<image class="more-icon" src="https://img.wlcod.com/manga-magic/image/07@2x.webp" />
				</view>
			</view>

			<!-- 卡片容器 -->
			<view class="card-container" v-if="records.length">
				<view v-for="item in records" :key="item.id" class="card" @click="goPage('item', item)">
					<!-- 背景图片 -->
					<view class="card-image">
						<image :src="item.coverpic" class="img-inner" mode="aspectFill" />
						<view class="progress">{{ `${item.chaps}话/${item.allchapter}话 ` }}</view>
					</view>
					<!-- 卡片标题 -->
					<view class="card-title">{{ item.title }}</view>
				</view>
			</view>
			<view style="text-align: center;" v-else>
				<image class="empty-img" :src="`${imgBaseUrl}history-empty-data.webp`" />
				<view class="empty-text">暂无历史记录</view>
			</view>
		</view>


		<view class="menu-group">
			<view class="menu-left">
				<image class="im-icon" :src="`${imgBaseUrl}im-icon-default.webp`" />
				<text>联系我们</text>
			</view>
			<button class="b2" open-type="im" :data-im-id="imCount"></button>

			<image class="menu-icon" src="https://img.wlcod.com/manga-magic/image/07@2x.webp" />
		</view>

	</view>

</template>

<script setup lang="ts">
import { getHistoryList, eventUser, getHistoryChaps, userInfo, updateUserInfo } from '@/api';
import { useAppInit, useAuth } from '@/hooks';
import { onShow } from '@dcloudio/uni-app';
import { ref } from 'vue';
const { config } = useAppInit()
const { user } = useAuth()
const userData = ref<API.User>()
const imCount = ref(config.value?.app?.im_account || 0)
console.log('imCount', imCount.value)

const records = ref<API.BookItem[]>([])

const getHistoryData = async () => {
	const { data } = await getHistoryList({ page_size: 20 })
	records.value = data.data
}

const getUserProfile = () => {
	uni.getUserProfile({
		async success({ userInfo }) {
			await updateUserInfo({ avatar: userInfo.avatarUrl, nickname: userInfo.nickName })
			getUserInfo()
		},
		fail(result) {
			uni.showToast({ title: '没有配置隐私权限' })
			console.log(333, result)
		},
	});
}

const goPage = async (e: string, item?: any) => {
	switch (e) {
		case 'history':
			uni.navigateTo({ url: '/pages/history/index' })
			break;
		case 'vip':
			eventUser({ event: 8 })
			uni.navigateTo({ url: '/pages/vip-center/index' })
			break;
		case 'item':
			// uni.navigateTo({ url: `/pages/book-detail/index?&id=${item.id}` });
			const { data } = await getHistoryChaps(item.id)
			uni.navigateTo({ url: `/pages/readingPage/index?&id=${item?.id}&chapter=${data.history_chapter}` });
			break;
	}
}
const getUserInfo = async () => {
	const { data } = await userInfo()
	userData.value = data
	user.value = data
}
onShow(async () => {
	getHistoryData()
	getUserInfo()
}) 
</script>

<style lang="less" scoped>
.page-mine {
	width: 100vw;
	height: 100vh;
	padding: 0 35rpx;
	z-index: 9;
	position: relative;
	overflow: hidden;
	background: #F8F9FB;

	.user-avatar {
		width: 100%;
		height: 102rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 60rpx;

		.user-avatar-img {
			width: 144rpx;
			height: 144rpx;
			border-radius: 50%;
		}

		.user-box {

			.user-text {
				margin-left: 24rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.refresh-img {
					width: 36rpx;
					height: 32rpx;
					margin-left: 16rpx;
				}
			}

			.userId {
				margin-left: 24rpx;
				font-size: 24rpx;
				color: #000000;
				margin-top: 10rpx;
			}

			.vip-expiration-time {
				margin-left: 24rpx;
				margin-top: 8rpx;
				font-size: 24rpx;
				color: #722600;
			}
		}

	}

	.vip-banner {
		width: 686rpx;
		height: 96rpx;
		background: url(https://img.wlcod.com/manga-magic/image/mine-page-bg.webp) 0 0 no-repeat;
		background-size: 100% 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 44rpx auto 0;

		.vip-left {
			display: flex;
			flex-flow: column nowrap;
			justify-content: center;
			align-items: center;

			.vip-desc {
				font-size: 28rpx;
				color: #722600;
				margin-left: 128rpx;
				margin-top: 12rpx;
			}

			.vip-tips {
				font-size: 22rpx;
				color: #744D1D;
				margin-left: 128rpx;
				margin-top: 4rpx;
			}
		}

		.vip-right {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 158rpx;
			height: 48rpx;
			background: linear-gradient(to right, #FFDA7A, #FFBD00);
			border-radius: 24rpx;
			font-size: 22rpx;
			color: #682200;
			margin-right: 24rpx;

			.right-arrow {
				margin-left: 8rpx;
				width: 14rpx;
				height: 24rpx;
			}
		}
	}



	.history-module {
		width: 100%;
		height: 280rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		box-sizing: border-box;
		padding: 24rpx;
		margin-top: 24rpx;
	}

	.history-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;

		.title {
			font-size: 30rpx;
			color: #222222;
		}

		.more-link {
			font-size: 24rpx;
			color: #8B8B8B;
			display: flex;
			justify-content: center;
			align-items: center;

			.more-icon {
				width: 56rpx;
				height: 56rpx;
			}
		}
	}

	.empty-img {
		width: 156rpx;
		height: 106rpx;
	}

	.empty-text {
		font-size: 28rpx;
		color: #595E6C;
		text-align: center;
	}

	.card-container {
		display: flex;
		width: 100%;
		overflow-x: auto;
	}


	.card {
		width: 200rpx;
		margin-right: 16rpx;
		overflow: hidden;
		text-align: center;
		flex: 0 0 auto;
	}

	.card-image {
		position: relative;
		width: 200rpx;
		height: 116rpx;

		.img-inner {
			width: 100%;
			height: 100%;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
		}

		.progress {
			position: absolute;
			top: 80rpx;
			left: 12rpx;
			font-size: 20rpx;
			color: #FFFFFF;
		}
	}


	.card-title {
		font-size: 24rpx;
		color: #222222;
		margin-top: 12rpx;
		width: 200rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		text-align: left;
		white-space: nowrap;
	}

	.menu-group {
		width: 100%;
		height: 96rpx;
		margin-top: 24rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		padding: 20rpx 24rpx;
		box-sizing: border-box;

		.menu-icon {
			width: 56rpx;
			height: 56rpx;

		}

		.menu-left {
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.im-icon {
				width: 56rpx;
				height: 56rpx;
				margin-right: 16rpx;
			}

			text {
				font-size: 28rpx;
				color: #000000;
			}
		}
	}


}

.popup-content {
	width: 100vw;
	height: 0;
	background-color: #fff;
	transition: height 0.3s ease-in-out;
	position: fixed;
	bottom: 0;
	left: 0;
}

.show-up {
	height: 50vh;
}

.show-down {
	height: 0;
}

.b2 {
	width: 100%;
	height: 100%;
	padding: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: transparent;
	border: none;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 9;

	&::after {
		display: none;
	}

}
</style>